<template>
  <div class="menu">
 <el-col :span="24">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgba(51,51,51,1)"
      text-color="#fff"
      active-text-color="#00c1de">
      <el-menu-item index="1">      
        <span slot="title">阿里云计算</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>  

      <el-menu-item index="2">
        <span slot="title">产品</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>
      <el-menu-item index="3">
        <span slot="title">解决方案</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>
      <el-menu-item index="4">
        <span slot="title">云市场</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>
      <el-menu-item index="4">
        <span slot="title">开发者</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>
      <el-menu-item index="4">
        <span slot="title">文档</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>
      <el-menu-item index="4">
        <span slot="title">云市场</span>
        <i class="el-icon-arrow-right"></i>
      </el-menu-item>
    </el-menu>
  </el-col>
  </div>
</template>

<script>
export default {
  name: 'Menu'
}
</script>
<style lang="stylus" scoped>
.menu
  position absolute
  top 51px
  z-index 99
  margin-left -200px
  width 200px
  height 600px
  transition margin-left 0.5s
  background-color rgba(51,51,51,1)
  overflow hidden
  .el-menu
    padding-top 10px
    border 0
    .el-menu-item
      height 40px
      line-height 40px
      background-color rgba(51,51,51,1) !important
  .el-icon-arrow-right
    position absolute
    left 160px
    top 10px
    color #fff
</style>